<template>
	<view class="page-body">
		<!-- 表格搜索组件开始 -->
		<vk-data-table-query
			v-model="queryForm.formData"
			:columns="queryForm.columns"
			@search="search"
		></vk-data-table-query>
		<!-- 表格搜索组件结束 -->
		<view>
			<el-row>
				<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">发表</el-button>
				<!-- <el-button type="success" size="small" icon="el-icon-edit-outline"
					style="margin-left: 20rpx;"
					@click="exportExcel">
					用户导出
				</el-button> -->
			</el-row>
		</view>
		<vk-data-table
			ref="table"
			:action="table.action"
			:columns="table.columns"
			:query-form-param="queryForm"
			:right-btns="['detail','update','delete']"
			:row-no="true"
			:pagination="true"
			@update="updateBtn"
			@delete="deleteBtn"
			@detail = "detail"
			@current-change="currentChange"
		></vk-data-table>
		<vk-data-dialog
			v-model="formm.props.show"
			:title="formm.props.title"
			mode="form"
			:fullscreen="true"
			:close-on-click-modal="false"
		>
			<vk-data-form
				ref="formm"
				v-model="formm.data"
				:rules="formm.props.rules"
				:action="formm.props.action"
				:form-type="formm.props.formType"
				:columns='formm.props.columns'
				label-width="100px"
				:loading.sync="formm.props.loading"
				@success="formm.props.show = false;refresh();"
			>
				<template v-slot:content="{ form, keyName }">
					<vk-data-input-editor v-model="form[keyName]" placeholder="请输入内容" width="50%"></vk-data-input-editor>
				</template>
			</vk-data-form>
		</vk-data-dialog>
	</view>
</template>


<script>
		
	var that;								// 当前页面对象
	var vk;									// 自定义函数集
	var originalForms = {};						// 表单初始化数据
	
	export default {
		data() {
			// 页面数据变量
			return {
				// 页面是否请求中或加载中
				loading:false,
				// init请求返回的数据
				data:{
					
				},
				queryForm:{
					// 查询表单数据源，可在此设置默认值
					formData:{
						
					},
					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
					columns:[
						{ key:"area_code", title:"区域code", type:"text", width:160, mode:"%%" },
						{ key:"user_id", title:"用户id", type:"text", width:160, mode:"%%"},
						{ key:"category_id", title:"分类id", type:"text", width:160, mode:"%%"},
						{
							key:"article_status", title:"文章状态", type:"select", width: 150,
							data:[
								{ value: "", label:"全部"},
								{ value:0, label:"草稿箱"},
								{ value:1, label:"已发布"},
							]
						},
						{
							key:"audit_status", title:"审核状态", type:"select", width: 150,
							data:[
								{ value: "", label:"全部"},
								{ value:0, label:"未审核"},
								{ value:1, label:"已审核"},
							]
						},
						{ key:"_add_time", title:"发表时间", type:"datetimerange", width:400, mode:"[]" },
					]
				},
				table:{
					// 表格数据请求地址
					action:"admin/article/sys/getList",
					columns:[
						{ key:"_id", title:"id", type:"text", width:220 },
						{ key:"category_id", title:"分类", type:"text", width:200 },
						{ key:"categoryInfo.name", title:"分类名称", type:"text", width:200 },
						{ key:"area_code", title:"区域code", type:"text", width:200 },
						{ key:"zoneInfo.merger_name", title:"区域名称", type:"text", width:200 },
						{ key:"title", title:"标题", type:"text", width:200},
						{ key:"excerpt", title:"摘要", type:"text", width:200},
						{ 
							key:"article_status", title:"文章状态", type:"tag", width:120 ,
							data:[
								{ value:0, label:"草稿箱", tagType:"danger" },
								{ value:1, label:"已发布", tagType:"success" },
							]
						},
						{
							key:"is_sticky", title:"是否热门", type:"tag", width:120 ,
							data:[
								{ value: true, label:"热门" ,tagType:"danger"},
								{ value: false, label:"不热门", tagType:"success"}
							]
						},
						{
							key:"article_status", title:"推荐", type:"tag", width:120 ,
							data:[
								{ value:0, label:"草稿箱", tagType:"danger" },
								{ value:1, label:"已发布", tagType:"success" },
							]
						},
						{ key:"view_count", title:"阅读数量", type:"number", width:100, defaultValue:0},
						{ key:"like_count", title:"点赞数", type:"number", width:100, defaultValue:0},
						{ 
							key:"comment_status", title:"能否评论", type:"tag", width:100,
							data:[
								{ value:0, label:"关闭", tagType:"danger" },
								{ value:1, label:"开放", tagType:"success" },
							]
						},
						// { key:"user_id", title:"用户id", type:"text", width:200},
						// { key:"userInfo.nickname", title:"用户昵称", type:"text", width:200},
						{ key:"comment_count", title:"评论数量", type:"number", width:100, defaultValue:0},
						{ key:"_add_time", title:"发表时间", type: "dateDiff", width: 120, sortable:"custom"},
						{ key:"last_modify_date", title:"最后修改时间", type: "dateDiff", width: 120, sortable:"custom"},
					],
					// 当前高亮的记录
					selectItem:"",
					// 多选框选中的值
					multipleSelection:[],
				},
				formm:{
					// 表单请求数据，此处可以设置默认值
					data: {
						article_status : 0,
						audit_status : 1,
						is_sticky: false,
						is_essence: false,
						allPlatform: false,
						mode: 1,
						comment_status : 1,
						content: ""
					},
					props:{
						// 表单请求地址
						action:"",
						columns:[
							{ key:"title", title:"标题", type:"text", maxlength:35, showWordLimit:true, width: "30%"},
							{ key:"category_id", title:"分类", type:"cascader", width: "30%",
							  action:"admin/category/sys/getList",
							  props:{
								list:"rows",
								value:"_id",
								label:"name",
								children:"children",
							  }
							},
							{ key:"allPlatform", title:"全平台", type:"switch", "tips":"区域管理员用户无此权限"},
							{ key:"content", title:"文章内容", type:"editor", width:"50%" },
							{
								key:"article_status", title:"文章状态", type:"radio" ,
								optionType:'button',
								data:[
									{ value:0, label:"草稿箱" },
									{ value:1, label:"已发布" }
								]
							},
							{
								key:"audit_status", title:"审核状态", type:"radio" ,
								optionType:'button',
								data:[
									{ value:0, label:"未审核" },
									{ value:1, label:"已审核" }
								]
							},
							{ 
								key:"is_sticky", title:"是否热门", type:"switch",
								tips:"放入热门的内容将出现所有用户的热门频道，请谨慎",
							},
							{ key:"is_essence", title:"是否加精", type:"switch" },
							{
								key:"comment_status", title:"评论状态", type:"radio" ,
								optionType:'button',
								data:[
									{ value:0, label:"关闭" },
									{ value:1, label:"开放" }
								]
							},
							{
								key:"mode", title:"显示模式", type:"select", width: "30%",
								data:[
									{ value:1, label:"无图" },
									{ value:2, label:"左图右文" },
									{ value:3, label:"左文右图" },
									{ value:4, label:"上图下文" },
									{ value:5, label:"上文下图" },
									{ value:7, label:"大图模式" }
								]
							},
						]
					},
					rules:{
						title:[
							{ required:true, message:'标题不能为空', trigger:'change' }
						],
						category_id:[
							{ required:true, message:'分类不能为空', trigger:'change' }
						],
						content:[
							{ required:true, message:'内容不能为空', trigger:'change' }
						],
					},
					// add 代表添加 update 代表修改
					formType:"",
					// 是否显示表单的弹窗
					show:false,
					// 表单是否在请求中
					loading:false
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
			
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 页面触底部
		onReachBottom(){
			
		},
		// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
		onResize(){
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		// 监听 - 页面创建时
		created() {
			
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				
				//查看用户角色
				let userInfo = vk.getVuex('$user.userInfo');
				let role = userInfo.role;
				//权限有限的话，需要修改部分数据
				if(role.indexOf('admin-zone') > -1){
					
					that.queryForm.formData = {
						area_code : userInfo.area_code
					}
					
					//区域code不能编辑
					that.queryForm.columns.splice(0,1);
					
					//全平台按钮不能使用
					that.formm.props.columns[2] = { key:"allPlatform", title:"全平台", type:"switch", "tips":"区域管理员用户无此权限", "disabled": true};

				}
				
				originalForms["formm"] = vk.pubfn.copyObject(that.formm);
			},
			// 表单重置
			resetForm(){
				vk.pubfn.resetForm(originalForms, that);
			},
			addBtn(){
				that.resetForm();
				that.formm.props.action = 'admin/article/sys/add';
				that.formm.props.formType = 'add';
				that.formm.props.title = '添加文章';
				that.formm.props.show = true;
			},
			// 显示修改页面
			updateBtn({ item }){
				that.formm.props.action = 'admin/article/sys/update';
				that.formm.props.formType = 'update';
				that.formm.props.title = '编辑';
				that.formm.props.show = true;
				that.formm.data = item;
			},
			detail({ item }){
				
				vk.navigateTo("detail?id=" + item._id);
				
			},
			// 导出xls表格文件
			exportExcel(){
				that.$refs.table.exportExcel();
			},
			refresh(){
				that.$refs.table.refresh();
			},
			// 监听 - 行的选中高亮事件
			currentChange(val){
				that.table.selectItem = val;
			},
			// 删除按钮
			deleteBtn({ item, deleteFn }){
				deleteFn({
					action:"admin/article/sys/delete",
					data:{
						_id: item._id
					},
				});
			},
			// 搜索
			search(){
				that.$refs.table.search();
			},
		},
		// 过滤器
		filters:{
			
		},
		// 计算属性
		computed:{
	
		},
		components: {
			// editor
		},
	}
</script>
<style lang="scss" scoped>
	
	
</style>
